<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'mctwo.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/hplus/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/hplus/css/plugins/sweetalert/sweetalert.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/hplus/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/hplus/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>



<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="css/mcone.css" type="text/css">
<script type="text/javascript" src="js/jquery.form.js"></script>

<script type="text/javascript">
	$(function() {
		$(".dian").click(function() {
			var id = $(this).children("#yin1").val();
			window.location.href = "mcthrees.do?pan=quan&spid=" + id;
		})
		$(".yin").hide();
		$(".div_5").mouseenter(function() {
			$(this).children(".yin").slideDown(100);
		})
		$(".div_5").mouseleave(function() {
			$(this).children(".yin").slideUp(100);
		})
	})


	


	var cai = 0;
	function GetQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) return (r[2]);
		return null;
	}

	var sname = GetQueryString("spid");
	if (sname != null) {
		var sname_ = decodeURIComponent(sname);
		cai = sname;
	}


	
	
	function uploadPic() {  
		var  name = $("#name").val();
	
		var current = $("#file").val();
        // 上传设置  
        var options = {  
                // 规定把请求发送到那个URL  
                url: "mctwo.do?pan=jia",  
                // 请求方式  
                type: "post",  
                data:{"name":name,"spid":cai},
                // 服务器响应的数据类型  
                dataType: "json",  
                // 请求成功时执行的回调函数  
                success: function(data, status, xhr) {  
                    // 图片显示地址  
                    var zui = "<div class='div_5'>"
			    		+"<div class='yin' style='display:none'>"
			    			+"<div><a href='#'>编辑</a></div>"
			    			+"<div><a href='javascript:void(0);' onclick='del(this,"+data.id+")'>删除</a></div>"
			    		+"</div>"
			    		+"<div class='dian'>"
			    		+"<input type='hidden' id='yin1' value='"+data.id+"' />"
			            +"<img src='"+data.img+"' width='35px' height='35px'>"
			            +"<br>"
			           +"<p>"+data.name+"</p>"
			           +"</div>"
			        +"</div>";
		
                    $("#ding").prepend(zui);
                }  
        };  
          
        $("#jvForm").ajaxSubmit(options);  
    }  
	
	
	
	
	
	function del(name,id){
		
			
  		swal({ 
		  title: "确定删除吗？", 
		  text: "你将无法恢复该虚拟文件！", 
		  type: "warning",
		  showCancelButton: true, 
		  confirmButtonColor: "#DD6B55",
		  confirmButtonText: "确定删除！", 
		  cancelButtonText: "取消删除！",
		  closeOnConfirm: false, 
		  closeOnCancel: false	
		},
		function(isConfirm){ 
		  if (isConfirm) { 
		  
		  	
		  		$.post("mctwo.do?pan=del", {
			"id" : id
		}, function(date) {
			if (date == 1) {
				$(name).parent().parent().parent().remove();
			}
		})
		    swal("删除！", "你的虚拟文件已经被删除。",
			"success"); 
		  } else { 
		    swal("取消！", "你的虚拟文件是安全的:)",
			"error"); 
		  } 
		});
		
		
	}
</script>

</head>

<body>
	<div class="div">
		<div id="d1" class="d1">
			<button type="button" class="btn" data-toggle="modal"
				data-target="#myModal">增加</button>
		</div>
		<div id="ding">
			<c:forEach items="${list }" var="list">
				<div class="div_5">
					<div class="yin">
						<div>
							<a href="#">编辑</a>
						</div>
						<div>
							<a href="javascript:void(0);" onclick="del(this,${list.id})">删除</a>
						</div>
					</div>
					<div class="dian">
						<input type="hidden" id="yin1" value="${list.id }" /> <img
							src="${list.img }" width="35px" height="35px"> <br>
						<p>${list.name }</p>
					</div>

				</div>
			</c:forEach>
		</div>
	</div>



	<!-- Modal -->
	<div class="modal fade" id="myModal">
		<div class="modal-dialog" style="width:600,height:303px;"
			role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">增加用户</h4>
				</div>
				<div class="modal-body">
					<!-- form开始 -->
					<form id="jvForm" action="" method="post" enctype="multipart/form-data">
						<div class="form-group">
							<label for="name">材料名称:</label> <input type="text"
								class="form-control" id="name" placeholder="请输入材料名称">
						</div>

						<div class="form-group">
							<label for="current">图片地址:</label>
							<input id="file" type="file" name="file" class="form-control">
						</div>
					</form>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button onclick="uploadPic()" type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
				</div>
			</div>
		</div>
	</div>

</body>
</html>
